<template>
    <div class="running">
        <div class="cycle" ref="cycle" :style="{opacity: this.board ? 1 : 0}">
            <div class="cycle-container" :style="{ perspective: radius * 2 + 'px', transform: 'translateY(' + (current === -1 ? 0 : -(radius * vmin / size - size / 8)) + 'px) rotate(' + ((current === -1 ? runner.rounds * cells.length : current) * 360 / cells.length) + 'deg) scale(' + (vmin / (current === -1 ? radius * 2 + 200 : size)) + ')', top: vmin / 2 + 'px', left: vmin / 2 + 'px' }">
                <div class="sky-box" :style="{ width: (outerRadius * 2 + 50) + 'px', height: (outerRadius * 2 + 50) + 'px' }"></div>
                <div class="sun" :style="{ width: runner.level === 0 ? 50 : Math.max(50, outerRadius * 2 - size) + 'px', height: runner.level === 0 ? 50 : Math.max(50, outerRadius * 2 - size) + 'px', borderWidth: Math.max(50, outerRadius * 2 - 300) / 10 + 'px' }"></div>
                <div v-for="(node, index) in this.board.cycle" class="node" :key="index" :style="{ width: cell + 'px', transform: 'translate(-50%, -50%) rotate(' + (-(cells.length - cellPosition(index) - 1 + (node === false ? 1 : 0)) * (360 / cells.length)) + 'deg) translate(0px, ' + (radius + (node === false ? size / 4 : 0)) + 'px)' }">
                    <div class="box" :ref="'box'+index" :class="[node === true ? 'leave' : typeof node === 'string' ? 'load' : 'enter']" :style="{ width: cell + 'px' }">
                        <div class="ground" :style="{ width: cell + 'px', opacity: node === false ? 0 : 1 }" :class="[ 'tile' + (index % 4) ]"></div>
                        <div class="background" :style="{ width: cell + 'px', opacity: node === false ? 0 : 1 }" :class="[ 'background' + (index % 8) ]"></div>
                        <div :style="{ opacity: typeof node === 'string' ? 1 : 0 }" class="item" :class="node"></div>
                    </div>
                </div>
                <div v-for="(r, index) in this.runners" class="role" :key="index" :style="{ opacity: r.level ? 1 : 0, transform: 'translate(-50%, -50%) rotate(' + (-r.position * (360 / cells.length) - r.rounds * 360) + 'deg) translate(0px, ' + radius + 'px)' }">
                    <div class="image">
                        <div class="image-container" :style="{top: ((game.groups.length - r.level + 1) * 25 / game.groups.length) + 'px', transform: 'rotate(' + ((r.position + (r.rounds * board.cycle.length)) * 360) + 'deg)'}">
                            <img v-if="isSelf(r)" src="./images/self.png" alt="" :style="{ width: (50 + ((r.level - 1) * 50 / game.groups.length)) + 'px', height: (50 + ((r.level - 1) * 50 / game.groups.length)) + 'px'}">
                            <img v-else="" src="./images/other.png" alt="" :style="{ width: (50 + ((r.level - 1) * 50 / game.groups.length)) + 'px', height: (50 + ((r.level - 1) * 50 / game.groups.length)) + 'px'}">
                        </div>
                    </div>
                    <div class="buffs">
                        <div v-for="buff in r.buffs" class="buff" :class="buff.type"></div>
                        <!--<div class="buff">{{ r.rounds }}:{{ r.position }}:{{ ((current === -1 ? runner.rounds * cells.length : current) / cells.length).toFixed(3) }}</div>-->
                    </div>
                    <div class="name" :class="{ self: isSelf(r) }">{{ r.player.name }}</div>
                </div>
            </div>
        </div>
        <div class="clicker" v-if="runner.status.answers.length">
            <div class="question" :style="runner.status.question.style || ''">{{ runner.status.question.title }}</div>
            <div class="answers">
                <div class="answer" v-for="(answer, index) in runner.status.answers" :style="answer.style || ''" @click="doAnswer(runner.status.index, index)" @touchstart.prevent="doAnswer(runner.status.index, index)">{{ answer.title }}</div>
            </div>
        </div>
        <div class="tips" v-else="">
            <div class="tip" v-if="runner.level === 0">已淘汰</div>
            <template v-else="">
                <div class="tip" v-for="b in runner.buffs"><span>{{ b.title }}</span> 状态剩余 {{ b.left }}s</div>
            </template>
        </div>
    </div>
</template>

<script>
    import {mixin, utils} from 'board-game/client';

    // import common from './../common';

    export default {
        name: "game",
        mixins: [mixin],
        data() {
            return {
                vmin: utils.vmin,
                size: 600,
                cell: 150
            };
        },
        mounted() {
            // setTimeout(() => this.autoAnswer(), Math.random() * 5000 + 500);
            console.log(this.$refs.cycle);
            this.$refs.cycle.addEventListener('animationEnd', this.animationEnd);
            this.$refs.cycle.addEventListener('webkitAnimationEnd', this.animationEnd);
        },
        computed: {
            cells() {
                return this.board ? this.board.cycle.filter(node => node !== false) : [];
            },
            runners() {
                return this.board ? this.board.runners.filter(node => typeof node === 'object') : [];
            },
            runner() {
                return this.runners.find(runner => this.isSelf(runner));
            },
            current() {
                let index = this.cells.findIndex(node => typeof node === 'object' && this.isSelf(node));
                if (index === -1) return -1;
                return this.cells.length * this.runner.rounds + this.runner.position;
            },
            radius() {
                return 75 / Math.tan(Math.PI / this.cells.length);
                // return this.cells.length * 150 / (2 * Math.PI);
            },
            outerRadius() {
                return 75 / Math.sin(Math.PI / this.cells.length);
            }
        },
        methods: {
            doAnswer(question, answer) {
                if ((question || question === 0) && (answer || answer === 0)) {
                    this.$root.emit.doAnswer({question, answer});
                }
            },
            cellPosition(cycleIndex) {
                return this.board.cycle.filter((node, index) => cycleIndex < index && node !== false).length;
            },
            isSelf(runner) {
                return runner.player.id === this.role.player.id;
            },
            autoAnswer() {
                if (this.board && this.runner) {
                    if (this.runner.status.answers.length) {
                        this.doAnswer(this.runner.status.index, this.runner.status.answers.findIndex(answer => answer.right));
                    }
                }
                setTimeout(() => this.autoAnswer(), Math.random() * 2000 + 500);
            },
            animationEnd(arg1, arg2) {
                console.log(arg1, arg2);
            }
        }
    }
</script>

<style lang="less" scoped>
    @duration: 0.75s;
    @time-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    @keyframes enterGround {
        0% { transform: rotateZ(0deg); }
        25% { transform: rotateZ(0deg); }
        50% { transform: rotateZ(-8deg); }
        70% { transform: rotateZ(4deg); }
        80% { transform: rotateZ(-2deg); }
        85% { transform: rotateZ(1deg); }
        88% { transform: rotateZ(0deg); }
        100% { transform: rotateZ(0deg); }
    }

    @keyframes leaveGround {
        0% { transform: rotateZ(0deg); }
        25% { transform: rotateZ(8deg); }
        55% { transform: rotateZ(-4deg); }
        70% { transform: rotateZ(2deg); }
        78% { transform: rotateZ(-1deg); }
        81% { transform: rotateZ(0deg); }
        100% { transform: rotateZ(0deg); }
    }

    @keyframes loadGround {
        0% { transform: translateY(8px); }
        50% { transform: translateY(-4px); }
        75% { transform: translateY(4px); }
        88% { transform: translateY(-2px); }
        94% { transform: translateY(2px); }
        98% { transform: translateY(-1px); }
        100% { transform: translateY(0px); }
    }

    @keyframes buff {
        0% { opacity: 0 }
        100% { opacity: 1 }
    }

    .running {
        display: flex;
        flex-direction: column;
        > .cycle {
            flex: none;
            width: 100vmin;
            height: 100vmin;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transition: all @duration;
            transition-timing-function: @time-function;
            background-color: #4893bf;
            > .cycle-container {
                position: absolute;
                width: 0;
                height: 0;
                transform-origin: center center;
                perspective-origin: center center;
                transform-style: preserve-3d;
                transition: all @duration;
                > .sky-box {
                    background-color: #ace6ea;
                    border-radius: 50%;
                    position: absolute;
                    transform: translate(-50%, -50%) translateZ(-60px);
                }
                > .sun {
                    background-color: #ffe69b;
                    border-radius: 50%;
                    border: solid #fff3d1;
                    position: absolute;
                    transform: translate(-50%, -50%) translateZ(-55px);
                }
                > .node {
                    position: absolute;
                    height: 100px;
                    transform-style: preserve-3d;
                    transform-origin: center center;
                    transition: all @duration;
                    > .box {
                        position: absolute;
                        height: 100px;
                        transform-origin: center;
                        transform-style: preserve-3d;
                        transition: all @duration;
                        &.leave {
                            animation: leaveGround 1 @duration;
                            /*transform: translateY(0px);*/
                        }
                        &.enter {
                            animation: enterGround 1 @duration;
                            /*transform: translateY(20px);*/
                        }
                        &.load {
                            animation: loadGround 1 @duration;
                            /*transform: translateY(10px);*/
                        }
                        > .ground {
                            position: absolute;
                            height: 100px;
                            font-size: 4em;
                            transform: rotateX(90deg);
                            transform-origin: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transition: opacity @duration;
                            &.tile0 {
                                background-image: url("./images/tile0.png");
                            }
                            &.tile1 {
                                background-image: url("./images/tile1.png");
                            }
                            &.tile2 {
                                background-image: url("./images/tile2.png");
                            }
                            &.tile3 {
                                background-image: url("./images/tile3.png");
                            }
                        }
                        > .background {
                            position: absolute;
                            height: 100px;
                            transform: translateY(-50%) translateZ(-50px);
                            transform-origin: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transition: opacity @duration;
                            &.background0 {
                                background-image: url("./images/background0.png");
                            }
                            &.background1 {
                                background-image: url("./images/background1.png");
                            }
                            &.background2 {
                                background-image: url("./images/background2.png");
                            }
                            &.background3 {
                                background-image: url("./images/background3.png");
                            }
                            &.background4 {
                                background-image: url("./images/background4.png");
                            }
                            &.background5 {
                                background-image: url("./images/background5.png");
                            }
                            &.background6 {
                                background-image: url("./images/background6.png");
                            }
                            &.background7 {
                                background-image: url("./images/background7.png");
                            }
                        }
                        > .item {
                            width: 60px;
                            height: 80px;
                            background-image: url("./images/item.png");
                            background-repeat: no-repeat;
                            background-size: cover;
                            position: absolute;
                            left: 45px;
                            top: 10px;
                            transform: translateY(-50%);
                            transform-origin: center center;
                            transition: opacity @duration;
                        }
                    }
                }
                > .role {
                    position: absolute;
                    width: 100px;
                    height: 200px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    transform-origin: center center;
                    transition: all @duration;
                    transition-timing-function: @time-function;
                    > .image {
                        width: 100px;
                        height: 100px;
                        position: relative;
                        > .image-container {
                            width: 100px;
                            height: 100px;
                            position: absolute;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            transition: all @duration;
                            transition-timing-function: @time-function;
                            > img {
                                transition: all @duration;
                            }
                        }
                    }
                    > .buffs {
                        flex: none;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        margin-top: 30px;
                        height: 32px;
                        > .buff {
                            width: 32px;
                            height: 32px;
                            font-size: 28px;
                            line-height: 32px;
                            animation: buff 1 @duration;
                            &.violent {
                                background: url("images/buffs/violent.png");
                            }
                            &.vertigo {
                                background: url("images/buffs/vertigo.png");
                            }
                        }
                    }
                    > .name {
                        flex: none;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        width: 100px;
                        height: 38px;
                        line-height: 38px;
                        font-size: 36px;
                        transform: translateZ(50px);
                        &.self {
                            color: #FF0000;
                        }
                    }
                }
            }
        }
        > .clicker {
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: 1.5em;
            border: 1px solid #303030;
            > .question {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            > .answers {
                flex: 3;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                > .answer {
                    width: 32%;
                    height: 32%;
                    background-color: #cccccc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        > .tips {
            flex: 1;
            display: flex;
            flex-direction: column;
            > .tip {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2em;
            }
        }
    }


    @media screen and (orientation: landscape) {
        .running {
            flex-direction: row;
        }
    }
</style>
